<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text、v-html -->
        <p>{{ name }}</p>
        <p v-text="name"></p>
        <p v-html="name"></p>

        <!-- v-on -->
         <button v-on:click="show()">按钮1</button>
         <button v-on:click="show">按钮2</button>
         <button @click="show">按钮3</button>
         <button @click="print('alice')">按钮4</button>
         <button @click="print(age)">按钮5</button>

         <p>{{ age }}</p>
         <button @click="setAge(23)">修改age</button>
         <button @click="age=24">修改age</button>
         <hr>


         <!-- v-show -->
        <!-- <div style="width: 100px; height: 100px; background: pink;" v-show="true"></div> -->
        <div style="width: 100px; height: 100px; background: pink;" v-if="false"></div>

        <!-- v-if、v-else-if、v-else -->
        <p v-if="age>=60">老年</p>
        <p v-else-if="age>=40">中年</p>
        <p v-else>青年</p>
        <hr>

        <!-- v-for -->
        <ul>
            <!-- <li v-for="item in names">{{ item }}</li> -->
            <li v-for="(item, index) in names" :key="index">{{ index }},{{ item }}</li>
        </ul>
        <hr>

        <!-- v-bind -->
        <img :src="url" v-bind:width="width" :abc="true" :hello="123">
        <hr>

        <!-- v-model -->
         性别：<input type="radio" value="male" v-model="sex">男
              <input type="radio" value="female" v-model="sex">女 <br>


        同意：<input type="checkbox" v-model="flag">

    </div>
    

    <script>
        var vm = new Vue({
            el: '#app',
            data: { // 数据仓库
                name: '<h2>tangxiaoyang</h2>',
                age: 19,
                names: ['tom', 'jerry', 'lucy','alice'],
                url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
                width: '200px',
                sex: 'female',
                flag: null,
            },
            methods: { // 方法仓库
                show(){
                    console.log(111)
                },
                print: function(args){
                    console.log(args)
                },
                setAge(age){
                    // console.log(this) // this指向当前Vue实例
                    // console.log(this===vm)
                    this.age = age

                    // this.show()
                }
            }
        })
        // console.log(vm)
    </script>
</body>
</html>